<template>
	<uni-popup ref="uniPopup" :type="type">
		<view style="background-color: #fff;">
			<view class="picker_bottom">
				<button class="basic_button cancal" @click="close">取消</button>
				<button class="basic_button confirm"  @click.stop="confirm">确认</button>
			</view>
			<view class="picker_box">
				<picker-view class="picker_view" indicator-style="height: 50px;" :value="value" @change="bindChange">
					<picker-view-column v-for="(item, index) in options" :key="index">
						<view class="item" v-for="(tag, i) in item.data" :key="i">{{ tag.label }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'bottom'
			},
			options: {
				type: Array,
				default: () => [{ data: [] }]
			},
			pickerIndex: {
				type: Array,
				default: () => [0]
			}
		},
		data() {
			return {
				value: []
			}
		},
		created() {
			this.value = this.pickerIndex
		},
		watch: {
			pickerIndex: {
				handler(newVal) {
					this.value = newVal
				},
				deep: true
			}
		},
		methods: {
			open() {
				this.$refs.uniPopup.open()
			},
			close() {
				
				this.$refs.uniPopup.close()
			},
			bindChange(e) {
				this.value = e.detail.value
			},
			confirm() {
				this.$emit('confirm', this.value)
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picker_bottom {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.cancal {
			background-color: transparent;
		}
		.confirm {
			background-color: transparent;
			color: $uni-color-warning;
		}
	}
	.picker_box {
		height: 425rpx;
		.picker_view {
			height: 100%;
		}
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>